<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px;">
      <el-breadcrumb-item :to="{ path: '/job' }">求职页面</el-breadcrumb-item>
      <el-breadcrumb-item>发布岗位</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
        title="填写越完整，越容易被看到"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 10px;">
      </el-alert>
      <el-form :model="form" label-width="100px">
        <el-form-item label="公司名">
          <el-select v-model="form.company" filterable>
            <el-option v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <span style="margin-left:5px">没找到自己的公司？<span style="color:#6a9af1;cursor:pointer;" @click="toSubmitCompany">去上传</span></span>
        </el-form-item>
        <el-form-item label="所招职位">
          <el-input v-model="form.post"></el-input>
        </el-form-item>
        <el-form-item label="岗位性质">
          <el-select v-model="form.module">
            <el-option :value="1" label="实习"></el-option>
            <el-option :value="2" label="校招"></el-option>
            <el-option :value="3" label="社招"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历要求">
          <el-select v-model="form.education">
            <el-option v-for="item in educationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年终奖（月）">
          <el-input-number v-model="form.months" :min="0" :max="999"></el-input-number>
        </el-form-item>
        <el-form-item label="月薪范围(千)">
          <el-input v-model="form.fromMoney"></el-input>
          <div style="margin: 0 20px;">至</div>
          <el-input v-model="form.toMoney"></el-input>
        </el-form-item>
        <el-form-item label="岗位职责" style="width: 100%;">
          <el-input type="textarea" v-model="form.duty"></el-input>
        </el-form-item>
        <el-form-item label="岗位要求" style="width: 100%;">
          <el-input type="textarea" v-model="form.request"></el-input>
        </el-form-item>
        <el-form-item label="工作地点">
          <el-input v-model="form.workPlace"></el-input>
        </el-form-item>
        <el-form-item class="buttonGroup">
          <el-button type="primary" @click="submitJob">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      educationOptions: [
        {
          value: 1,
          label: '博士后'
        },
        {
          value: 2,
          label: '博士'
        },
        {
          value: 3,
          label: '硕士'
        },
        {
          value: 4,
          label: '本科'
        },
        {
          value: 5,
          label: '专科'
        },
        {
          value: 6,
          label: '高中'
        },
        {
          value: 7,
          label: '初中'
        },
        {
          value: 8,
          label: '小学'
        }
      ],
      form: {
        months: 0
      },
      companyList: []
    }
  },
  methods: {
    toSubmitCompany () {
      this.$router.push('/submitCompany')
    },
    async submitJob () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      await this.$http.post('/job', {userId: userId, ...this.form})
      this.$message.success('发布职位成功~')
      this.$router.push('/job')
    },
    async getCompanyList () {
      const {data: res} = await this.$http.get('/job/companyList')
      this.companyList = res
    }
  },
  created () {
    this.getCompanyList()
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 10px 100px 0 100px;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .buttonGroup {
      width: 100%;
      margin-left: auto;
    }
    .el-form-item {
      width: 50%;
    }
  }
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
  }
}

</style>
